<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/vue.js"></script>
</head>
<body>
    <!-- 挂载点 -->
     <div id="app">
        <h1>自定义指令</h1>
        <div v-red>你好</div>
        <div v-color="a">你好 </div>
        <p>自动获取焦点：</p>
        <input type="text" v-focus></input>

        <p>不自动获取焦点：</p>
        <input type="text" ></input>
     </div>
    <!-- 方式一自定义全局变量----方式二 自定义局部变量 -->
     <script type="text/javascript">
           // 注册
       Vue.directive("red", {
           inserted: function (el,binding) {
            el.style.color = "red";
           }
});

Vue.directive("color1", function (el,binding) {
    el.style.color = binding.value;
});
var vm = new Vue({
    
    el: "#app",
    data: {
        a:'blue'
    },
    directives: {
        color: function (el,binding){
            el.style.color = binding.value;
        },
        focus:{
            inserted: function (el) {
                el.focus();
            }
        }
    },
});
     </script>
</body>
</html>